<template>
  <div style="display:flex;position: relative">
    <div class="dataShow">

      <div class="data-item">
        <div class="icon">
          <i class="iconfont icon-shoudaobaodan"></i>
        </div>
        <div class="data">
          <p class="t">本月收到</p>
          <p class="num">1,202<span>件</span></p>
          <p class="updonw">较上月<i class="iconfont icon-xiajiang sj"></i> 5%</p>
        </div>
      </div>


      <div class="data-item">
        <div class="icon">
          <i class="iconfont icon-banjieshiwu"></i>
        </div>
        <div class="data">
          <p class="t">办结量</p>
          <p class="num">1,202<span>件</span></p>
          <p class="updonw">较上月<i class="iconfont icon-shangsheng sj"></i> 2%</p>
        </div>
      </div>


      <div class="data-item">
        <div class="icon">
          <i class="iconfont icon-yunpanlogo-"></i>
        </div>
        <div class="data">
          <p class="t">按时办结量</p>
          <p class="num">1234<span>件</span></p>
          <p class="updonw">较上月<i class="iconfont icon-shangsheng sj"></i> 5%</p>
        </div>
      </div>


      <div class="data-item">
        <div class="icon">
          <i class="iconfont icon-chaoqi"></i>
        </div>
        <div class="data">
          <p class="t">超期件</p>
          <p class="num">27<span>件</span></p>
          <p class="updonw">较上月<i class="iconfont icon-xiajiang sj"></i> 1%</p>
        </div>
      </div>


      <div class="data-item">
        <div class="icon">
          <i class="iconfont icon-bumanyi"></i>
        </div>
        <div class="data">
          <p class="t">不满意</p>
          <p class="num">9<span>件</span></p>
          <p class="updonw">较上月<i class="iconfont icon-xiajiang sj"></i> 9%</p>
        </div>
      </div>

    </div>
    <Citys/>
  </div>
</template>

<script>

import Citys from '@/components/map/Citys'

export default {
  components: {
    Citys
  }

}
</script>
<style lang="scss" scoped>
.dataShow {
  position: relative;
  z-index: 100;
  margin-top: 35px;

  .right-info {
    display: flex;
    flex-direction: column;
  }

  .data-item {
    display: flex;
    margin-bottom: 30px;

    .icon {
      margin-right: 30px;
      background: #1e4467;
      display: flex;
      height: 80px;
      width: 80px;
      border-radius: 5px;
      position: relative;
      background: linear-gradient(to bottom, #819cd9, transparent);

      .iconfont {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        color: #c1d4f7
      }
    }

    .data {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .updonw {
        font-size: 12px;
      }

      .sj {
        font-size: 14px;
        margin: 0 5px;

        &.icon-xiajiang {
          color: lawngreen;
        }

        &.icon-shangsheng {
          color: orangered;
        }
      }

      .t {
        font-family: "阿里妈妈数黑体";
        font-size: 16px;
        //color:#999;
      }

      .num {
        margin-top: 8px;
        font-weight: bolder;
        font-family: number;
        font-size: 32px;
        line-height: 28px;
        letter-spacing: 2px;
        background-image: repeating-linear-gradient(#d3e4ff, #819cd9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        > span {
          font-size: 14px;
          color: #d3e4ff;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
